<template>
  <div id="home">
    <nav>
      <div @click="gocity" class="city">
        <img src="../assets/login.png" alt="" />
        <div class="name">
          {{ cs }}
        </div>
        <i class="iconfont icon-jiantoudown"></i>
      </div>
      <ul>
        <router-link to="/index/hot" tag="li" active-class="active"
          >正在热映</router-link
        >
        <router-link to="/index/wait" tag="li" active-class="active"
          >即将上映</router-link
        >
      </ul>
    </nav>
    <main ref="height" @scroll="scroll">
      <router-view></router-view>
    </main>
    <footer>
      <bottom></bottom>
    </footer>
  </div>
</template>

<script>
import bottom from "@/components/footer";
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      cs: "广州",
      n: 1,
    };
  },
  computed: {
    ...mapState("data", ["ct"]),
  },
  mounted() {
    this.cs = this.ct;
  },
  components: {
    bottom,
  },
  methods: {
    ...mapActions("data", ["getAllHots","getAllWaits"]),
    scroll() {
      if (this.$refs.height.scrollTop > 780 * this.n) {
        this.getAllHots(this.n);
        this.n++;
      }
    },
    gocity() {
      this.$router.push("/city");
    },
  },
};
</script>

<style scoped>
#home {
  height: 100%;
  display: flex;
  flex-direction: column;
}

nav {
  width: 100%;
  height: 0.6rem;
  border-bottom: 1px solid #ccc;
  line-height: 0.6rem;
  font-size: 0.18rem;
  padding: 0 0.15rem;
}
.city {
  display: flex;
  float: left;
  width: 1.1rem;
  height: 100%;
}
img {
  width: 0.25rem;
  height: 0.25rem;
  margin-top: 0.17rem;
  margin-right: 0.05rem;
  border-radius: 5px;
}
ul {
  float: left;
}
ul li {
  float: left;
  margin: 0 0.2rem;
  height: 0.59rem;
}
.name {
  max-width: 0.6rem;
  font-size: 0.15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.link {
  display: block;
  height: 0.59rem;
}

main {
  flex: 1;
  overflow: scroll;
  padding: 0;
}
footer {
  width: 100%;
  height: 0.5rem;
  border-top: 1px solid #ccc;
}
.active {
  color: red;
  border-bottom: 1px solid red;
}
</style>
